<script lang="ts" setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import router from "@/router";

const form = ref({});
const option = ref({
  width: 300,
  time: 60,
  codeType: 'phone',
  column: {
    username: {
      label: '用户名',
      autocomplete: 'off',
      rules: {required: true, message: '请输入用户名', trigger: 'blur'}
    },
    password: {
      label: '密码',
      autocomplete: 'off',
      rules: {required: true, message: '请输入密码', trigger: 'blur'}
    },
    code: {
      hide: true
    }
  }
});
const submit = (form) => {
  console.log(form);
  axios.post("/api/auth/login", form)
      .then(res => {
        console.log(res)
        if (res.data.success) {
          const msg = res.data.message
          localStorage.setItem("wikiback-auth-token", msg)
          checkShopRoles()
        } else {
        }
        ElMessage({
          message: "登录失败",
          type: "error"
        })
      })
};
const checkShopRoles = () => {
  axios.post("/api/auth/isShop", {}, {
    headers: {
      token: localStorage.getItem("wikiback-auth-token")
    }
  }).then(res => {
    console.log(res)
    const msg = res.data.message
    if (res.data.success) {
      localStorage.setItem("wikiback-auth-token", msg)
      ElMessage({
        message: "登录成功",
        type: "success"
      })
      setTimeout(()=> {
        router.push("/wiki/index")
      },300)
    } else {
      ElMessage({
        message: msg,
        type: "error"
      })
    }
  }).catch(err => {
    ElMessage({
      message: "权限异常，重新登录",
      type: "error"
    })
  })
}
if (localStorage.getItem("wikiback-auth-token")) {
  checkShopRoles()
}
</script>

<template>
  <div class="index-main">
    <div class="login-box">
      <img alt="" src="/index/bg-m.png" style="height: 100%;">
      <div style="display:flex;flex-direction: column;align-items: center;justify-content: center">
        <view style="font-size: 22px;margin-bottom: 30px;">WikiPerform商家管理平台</view>
        <avue-login v-model="form"
                    :option="option"
                    @submit="submit">
        </avue-login>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.index-main {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #faf8f5;

  .login-box {
    width: 800px;
    height: 600px;
    display: flex;
  }
}
</style>